<script lang="ts" setup>
import { queryTemplateList } from '@/api/editor/materials'
import error from '@/assets/images/error.png'
import loading from '@/assets/images/loading.png'
import searchHeader from '@/components/editorModules/searchHeader.vue'

import {
  LazyImg,
  Waterfall,
} from '@/components/vue-waterfall-plugin-next'
import { useEditor } from '@/views/Editor/app'
import CompListWrap from '@/views/Editor/layouts/panel/leftPanel/wrap/CompListWrap.vue'
import usePageMixin from '@/views/Editor/layouts/panel/leftPanel/wrap/mixins/pageMixin'
import { getDefaultName } from '@/views/Editor/utils/utils'
import {
  Group,
  Image,
} from 'leafer-ui'

const config = { imgSelector: 'cover' }
const { editor } = useEditor()

const keyword = ref()
const cateList = reactive([
  {
    label: '全部',
    value: '-1',
  },
  {
    label: '风景图片',
    value: '1111',
  },
  {
    label: '插画图片',
    value: '1111',
  },
])
function changeCate(e) {
  console.log('e=', e)
}
function onSearch(value, ev) {
  console.log('value=', value)
  console.log('keyword=', keyword.value)
  console.log('ev=', ev)
}
const { page } = usePageMixin()
page.pageSize = 20
function fetchData() {
  queryTemplateList(page).then((res) => {
    if (res.success) {
      const newDataList = res.data.records
      if (newDataList.length > 0) {
        page.dataList.push(...newDataList)
        page.pageNum += 1
      }
      if (page.dataList.length >= res.data.total) {
        page.noMore = true
      }
      else {
        page.noMore = false
      }
    }
  })
}
function handleClick(item) {
  editor.importJsonToCurrentPage(item.json, true)
}
</script>

<template>
  <div class="wrap">
    <SearchHeader
      v-model="keyword"
      :cate-list="cateList"
      @change-cate="changeCate"
      @search="onSearch"
    />
    <div class="temp-wrap">
      <CompListWrap
        :data="page.dataList"
        :config="config"
        :no-more="page.noMore"
        max-height="calc(100vh - 115px)"
        @fetch-data="fetchData"
      >
        <template #item="{ item, url, index }">
          <ACard
            hoverable
            class="cursor-pointer drop-shadow"
            :body-style="{ padding: '0px' }"
            @click="handleClick(item)"
          >
            <div class="">
              <div class="tags">
                <div class="tag">
                  LB
                </div>
                <!--                                <div>ag</div> -->
              </div>
              <LazyImg
                :url="url"
                class="img"
              />
            </div>
            <!--                      <div class="p5px"> -->
            <!--                          <span class="name truncated">{{ item.name }}</span> -->
            <!--                      </div> -->
          </ACard>
        </template>
      </CompListWrap>
    </div>
  </div>
</template>

<style lang="less" scoped>
.search__wrap {
  padding: 1.4rem 1rem 0.8rem 0rem;
}
.temp-wrap .tags {
  .tag {
    background-color: rgba(0, 0, 0, 0.6);
    //background-color:  rgb(var(--primary-6));
    border-radius: 8px;
    top: 6px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
    color: #fff;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    padding: 0 6px;
    position: absolute;
    left: 6px;
    z-index: 11;
  }
}
</style>
